{% load i18n %}
{% load static %}
{% load floppyforms %}
{% load contact_roles %}
<script type="text/javascript">
    // this is used by thumbnail.js to POST to the thumbnail update view
    window.thumbnailUpdateUrl = '{% url 'base-resources-set-thumb-from-bbox' resource.id %}';
</script>
<!--<link href="{% static "lib/css/bootstrap-select.css" %}" rel="stylesheet" />-->
<script type="text/javascript" src="{% static "geonode/js/utils/thumbnail.js" %}"></script>

<!-- Required to make select2 fields work for autocomplete -->
<link href="{% static "vendor/select2/dist/css/select2.css" %}" type="text/css" media="screen" rel="stylesheet" />
<link href="{% static "autocomplete_light/select2.css" %}" type="text/css" media="screen" rel="stylesheet" />
<script type="text/javascript" src="{% static "admin/js/vendor/jquery/jquery.js" %}"></script>
<script type="text/javascript" src="{% static "autocomplete_light/jquery.init.js" %}"></script>
<script type="text/javascript" src="{% static "vendor/select2/dist/js/select2.full.js" %}"></script>
<script type="text/javascript" src="{% static "vendor/select2/dist/js/i18n/en.js" %}"></script>
<script type="text/javascript" src="{% static "autocomplete_light/autocomplete.init.js" %}"></script>
<script type="text/javascript" src="{% static "autocomplete_light/forward.js" %}"></script>
<script type="text/javascript" src="{% static "autocomplete_light/select2.js" %}"></script>
<script type="text/javascript" src="{% static "autocomplete_light/jquery.post-setup.js" %}"></script>

<style>
/* general panel styles */
#mdeditor_form .panel-group .panel{
  overflow: visible;
}
/* date fields proper sizes */
#mdeditor_form .input-group.date {
  width: 100%;
}

/* resizable text-areas */
#mdeditor_form textarea {
  resize: vertical;
  height: 120px;
}

/* question mark (info) distance fom label*/
form #mdeditor_form label{
  margin-right: 0.3em;
}
/* regions */
#regions_multiselect_container .fstElement {
  width: 100%;
}
#regions_multiselect_container .fstChoiceItem {
  background-color: #2c689c;
  border: #2c689c;
}

#mdeditor_form .mandatory-hint,#mdeditor_form .advanced-hint {
  cursor: pointer;
}

/* publishing checkboxes */
#mdeditor_form #id_resource-metadata_uploaded_preserve,
#mdeditor_form #id_resource-is_approved,
#mdeditor_form #id_resource-is_published,
#mdeditor_form #id_resource-featured  {
  float: right;
}

/* mosaiking checkboxes */
#mdeditor_form #id_resource-is_mosaic,
#mdeditor_form #id_resource-has_time,
#mdeditor_form #id_resource-has_elevation  {
  float: right;
}

/* keywords */
#mdeditor_form .tokenfield.form-control {
  height: auto;
}

#mdeditor_form .thesauri_keywords label {
  display: block;
}
#mdeditor_form span.autocomplete-light-widget {
  width: 100%;
}
</style>
<style>
/* metadata edit workflow wizard */
.wizard--progress {
  list-style: none;
  margin: 0;
  padding: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
  color: #2c689c;
}
.wizard--progress > li {
  position: relative;
  display: table-cell;
  text-align: center;
  font-size: 0.8em;
}
.wizard--progress > li:hover {
  cursor: pointer;
}
.wizard--progress > li:before {
  transition: background 0.5s ease 0.1s;
  box-shadow: 5px 5px 5px rgba(0,0,0,.5);
  content: attr(data-step);
  display: block;
  margin: 0 auto;
  background: #DFE3E4;
  width: 3em;
  height: 3em;
  text-align: center;
  margin-bottom: 0.25em;
  line-height: 3em;
  border-radius: 100%;
  position: relative;
  z-index: 1000;
}
.wizard--progress > li:after {
  transition: background 1s ease, width 1s ease;
  width: 0px;
  box-shadow: 5px 5px 5px rgba(0,0,0,.5);
  content: '';
  position: absolute;
  display: block;
  background: #DFE3E4;
  height: 0.5em;
  top: 1.25em;
  left: 50%;
  margin-left: 1.5em\9;
  z-index: -1;
}

.wizard--progress > li:last-child:after {
  display: none;
}
.wizard--progress > li.is-complete {
  color: #333333;
}
.wizard--progress > li.is-complete:before, .wizard--progress > li.is-complete:after {
  color: #FFF;
  background: #333333;
}
.wizard--progress > li.is-complete:before {
  z-index: 1;
}
.wizard--progress > li.is-complete:after {
  transition: background 1s ease, width 1s ease;
  z-index: 0;
  width: 100%;
}
.wizard--progress > li a {
  color: #2c689c;
}
.wizard--progress > li.is-active {
  color: #2c689c;
}
.wizard--progress > li.is-active:before {
  color: #FFF;
  background: #2c689c;
}

.wizard--progress > li.is-complete a {
  color: #000;
}

/**
 * Needed for IE8
 */
.wizard--progress__last:after {
  display: none !important;
}

/**
 * Size Extensions
 */
.wizard--progress--medium {
  font-size: 1.5em;
}

.wizard--progress--large {
  font-size: 2em;
}
.wizard--progress > li:before {
    text-decoration: none;
}
.wizard--progress li:hover a{
  text-decoration: underline;
}
.wizard--progress a, .wizard--progress a:hover:before {
  text-decoration: none;
}

</style>

<style>
/* draggable table */
span.grippy {
  content: '....';
  width: 15px;
  height: 26px;
  display: inline-block;
  overflow: hidden;
  line-height: 5px;
  padding: 3px 4px;
  cursor: move;
  vertical-align: middle;

  font-size: 12px;
  font-family: sans-serif;
  letter-spacing: 2px;
  color: #cccccc;
  text-shadow: 1px 0 1px black;
}
span.grippy::after {
  content: '.. .. .. ..';
}
</style>
<!-- button class="btn btn-success metadata-edit-done" id="btn_upd_md_done" type="submit" style="float:right; opacity: 0;" >{% trans "Done!" %}</button -->
{% block body_outer %}
<ul id="md_tabs" class="nav nav-tabs">
  <li id="metadata_edit_tab" class="active">
      <a data-toggle="tab" href="#edit-metadata"><i class="fa fa-pencil"></i>{% trans "Edit" %}</a>
  </li>
    <!-- li id="preview_tab" data-toggle="tab" dhref="#preview">
        <a data-toggle="tab" href="#preview">Preview</a>
    </li -->
    <li id="settings_tab" dhref="#settings">
        <a data-toggle="tab" href="#settings"><i class="fa fa-cog"></i>{% trans "Settings" %}</a>
    </li>
    <li class="pull-right">
      <div class="form-actions">
        <a href="{% url "map_metadata_advanced" resource.id %}" class="btn btn-primary">{% trans "Advanced Metadata" %}</a>
      </div>
    </li>
</ul>

<div class="tab-content">
<div id="edit-metadata" class="tab-content tab-pane fade in active">
  <div id="completeness-hints" class="progress">

  <div class="mandatory-hint progress-bar" role="progressbar" style="width:33%">
    {% trans "Mandatory" %}
  </div>
  <div class="advanced-hint progress-bar" role="progressbar" style="width:34%">
    {% trans "Mandatory" %}
  </div>
  {% if UI_REQUIRED_FIELDS %}
      <div class="metadata-hint progress-bar" role="progressbar" style="width:33%">
        {% trans "Mandatory" %}
      </div>
  {% else %}
      <div class="progress-bar" role="progressbar" style="width:33%">
        {% trans "Optional" %}
      </div>
  {% endif %}
</div>
  <ul class="wizard--progress wizard--progress--medium">
      <li data-step="1" id="first" class="is-active" data-toggle="tab" href="#mandatory">
          <a>{% trans "Basic Metadata" %}</a>
      </li>
      <li data-step="2" id="second"  data-toggle="tab" href="#advanced">
          <a>{% trans "Location and Licenses" %}</a>
      </li>
      <li data-step="3" data-toggle="tab" href="#ownership">
          {% if UI_REQUIRED_FIELDS %}
            <a>{% trans "Required Metadata" %}</a>
        {% else %}
            <a>{% trans "Optional Metadata" %}</a>
        {% endif %}
      </li>
      {% block extra_metadata_steps %}
      {% endblock %}
  </ul>
    <div id="mandatory" class="tab-pane fade in active">
        <!--<br />-->
        <div class="panel-group">
            <div class="panel panel-default">
                <!-- div class="panel-heading">Data info</div -->
                <div class="panel-body">
                    <div class="row">
                        <div class="col">
                            <div id="basicInfo" class="container-fluid">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div id="basicDescriptiveInfo" class="container-fluid">
                            {% block map_thumbnail %}
                                <div class="col-lg-3">
                                    <span><label for="{{ map_form.thumbnail_url|id }}">{% trans "Thumbnail" %}</label></span>
                                    <div id="embedded_map" class="mrg-btm" style="height:250px;width: 250px;">
                                      <div id="preview_map" style="height: 85%;width: 100%;"></div>
                                      <div id="preview_image" style="height: 90%;width: 100%;">
                                          <img id="preview_image_src" src="{{ map_form.thumbnail_url.value }}" height="100%" width="100%"/>
                                      </div>
                                      <div>
                                        <span class="btn-group btn-group-xs btn-group-justified">
                                            <a class="btn btn-default" href="#" id="set_thumbnail">{% trans "Save" %}</a>
                                            <!-- span class="input-group-addon">
                                                <form id="form1" runat="server">
                                                    <input type='file' id="imgInp" />
                                                </form>
                                            </span -->
                                            <a class="btn btn-default" href="#" id="change_thumbnail">{% trans "Edit" %}</a>
                                        </span>
                                      </div>
                                    </div>
                                </div>
                            {% endblock map_thumbnail %}
                                <div class="col-lg-4">
                                    {% block map_title %}
                                    <div id="req_item">
                                      <span><label for="{{ map_form.title|id }}">{{ map_form.title.label }}</label></span>
                                          <!--<p class="xxs-font-size">(Name by which the cited resource is known)</p>-->
                                          {{ map_form.title }}
                                    </div>
                                  {% endblock map_title %}
                                  {% block map_abstract %}
                                    <div id="req_item">
                                        <span><label for="{{ map_form.abstract|id }}">{{ map_form.abstract.label }}</label></span>
                                        <!--<p class="xxs-font-size">(Brief narrative summary of the content of the resource/s)</p>-->
                                        {{ map_form.abstract }}
                                    </div>
                                  {% endblock map_abstract %}
                                </div>
                                <div class="col-lg-5">
                                  {% block map_date_type %}
                                    <div class="col-lg-6 col-xs-12">
                                        <span><label for="{{ map_form.date_type|id }}">{{ map_form.date_type.label }}</label></span>
                                        <!--<p class="xxs-font-size">(Identification of when a given event occurred)</p>-->
                                        {{ map_form.date_type }}
                                    </div>
                                  {% endblock map_date_type %}
                                  {% block map_date %}
                                    <div class="col-lg-6 col-xs-12" id="req_item">
                                        <span><label for="{{ map_form.date|id }}">{{ map_form.date.label }}</label></span>
                                        <!--<p class="xxs-font-size">(When a given event occurred on the resource)</p>-->
                                        {{ map_form.date }}
                                    </div>
                                  {% endblock map_date %}
                                  {% block map_category %}
                                    <div id="basicCategoryInfo" class="col-lg-12">
                                        <span><label for="{{ category_form.category_choice_field|id }}" class="control-label required-field">{% trans "Category" %}</label></span>
                                        <select
                                            data-live-search="true"
                                            data-size="5"
                                            name="category_choice_field"
                                            id="category_form"
                                            class="selectpicker form-control"
                                            >
                                            <option {% if not category_form.initial %} selected="selected" {% endif %} value="">---</option>
                                          {% for choice in category_form.category_choice_field.field.choices %}
                                              <option
                                              {% ifequal category_form.initial choice.0 %} selected="selected" {% endifequal %}
                                              value="{{ choice.0 }}"
                                              data-content="<span class='has-popover' data-container='body' data-toggle='popover' data-placement='top'  data-content=' {{ choice.2.description }}' rigger='hover'><i class='fa {{choice.2.fa_class}}'></i> {{ choice.2.gn_description }}<span>"
                                              >{{ choice.2.gn_description }}</option>
                                          {% endfor %}
                                        </select>
                                    </div>
                                  {% endblock map_category %}
                                  {% block map_group %}
                                    <div id="basicGroupInfo" class="col-lg-12">
                                        <span><label for="id_resource-group" class="control-label required-field">{% trans "Group" %}</label></span>
                                        <select
                                            title="{% trans "Choose one of the following..." %}"
                                            data-live-search="true"
                                            data-size="5"
                                            name="resource-group"
                                            id="id_resource-group"
                                            class="selectpicker form-control"
                                            >
                                            <option {% if not group %} selected="selected" {% endif %} value="">---</option>
                                            {% for group in metadata_author_groups %}
                                            <option
                                                value="{{ group.group.id }}"
                                                {% ifequal resource.group group.group %} selected="selected" {% endifequal %}
                                                >
                                                {{ group.title }}
                                            </option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                  {% endblock map_group %}
                                    {% block map_keywords %}
                                    <div class="col-lg-12">
                                        <span><label for="{{ map_form.date_type|id }}">{{ map_form.keywords.label }}</label></span>
                                        {{ map_form.keywords }}
                                    </div>
                                    {% endblock map_keywords %}
                                    {% if THESAURI_FILTERS %}
                                    <div class="col-lg-12 thesauri_keywords">
                                      {{tkeywords_form.as_p}}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="advanced" class="tab-pane fade">
        <div class="panel-group">
                <div class="panel panel-default">
                    <!-- div class="panel-heading">Metadata info</div -->
                    <div class="panel-body">
                        <div class="" id="mdinfo">
                            <div class="">
                                <div class="col-lg-4">
                                    {% block map_language %}
                                    <div>
                                        <span><label for="{{ map_form.language|id }}">{{ map_form.language.label }}</label></span>
                                        <!--<p class="xxs-font-size">(Language used within the dataset)</p>-->
                                        {{ map_form.language }}
                                    </div>
                                    {% endblock map_language %}
                                    {% block map_license %}
                                    <div>
                                        <span><label for="{{ map_form.license|id }}">{{ map_form.license.label }}</label></span>
                                        <!--<p class="xxs-font-size">(License of the dataset)</p>-->
                                        {{ map_form.license }}
                                    </div>
                                    {% endblock map_license %}
                                    {% block map_attribution %}
                                    <div>
                                        <span><label for="{{ map_form.attribution|id }}">{{ map_form.attribution.label }}</label></span>
                                        {{ map_form.attribution }}
                                    </div>
                                    {% endblock map_attribution %}
                                </div>
                                <div class="col-lg-4">
                                    {% block map_regions %}
                                      <div id="regions_multiselect_container">
                                          <span><label for="{{ map_form.regions|id }}">{{ map_form.regions.label }}</label></span>
                                          {{ map_form.regions }}
                                      </div>
                                    {% endblock map_regions %}
                                    {% block map_data_quality_statement %}
                                      <div>
                                          <span><label for="{{ map_form.data_quality_statement|id }}">{{ map_form.data_quality_statement.label }}</label></span>
                                          <!--<p class="xxs-font-size">(General explanation of the data producer's knowledge about the lineage)</p>-->
                                          {{ map_form.data_quality_statement }}
                                      </div>
                                    {% endblock map_data_quality_statement %}
                                </div>
                                <div class="col-lg-4">
                                    {% block map_restriction_code_type %}
                                    <div>
                                        <span><label for="{{ map_form.restriction_code_type|id }}">{{ map_form.restriction_code_type.label }}</label></span>
                                        <!--<p class="xxs-font-size">(Limitation/s placed upon the access or use of data)</p>-->
                                        {{ map_form.restriction_code_type }}
                                    </div>
                                    {% endblock map_restriction_code_type %}
                                    {% block map_constraints_other %}
                                    <div>
                                        <span><label for="{{ map_form.constraints_other|id }}">{{ map_form.constraints_other.label }}</label></span>
                                        <!--<p class="xxs-font-size">(Other restrictions and legal prerequisites for accessing or use data and metadata)</p>-->
                                        {{ map_form.constraints_other }}
                                    </div>
                                    {% endblock map_constraints_other %}
                                </div>
                            </div>
                            <div class="row"></div>
                        </div>
                    </div>
                </div>
        </div>
    </div>

    <div id="ownership" class="tab-pane fade">
        <div class="panel-group"><div class="panel panel-default"><div class="panel-body">
        <div id="mdinfo">
            <div class="col-xs-12 col-lg-4">
              <p>{% trans "Other, Optional, Metadata" %}</p>
                {% block map_edition %}
                <div>
                    <span><label for="{{ map_form.edition|id }}">{{ map_form.edition.label }}</label></span>
                    <!--<p class="xxs-font-size">(Version of the cited resource)</p>-->
                    {{ map_form.edition }}
                </div>
                {% endblock map_edition %}
                {% block map_doi %}
                <div>
                    <span><label for="{{ map_form.doi|id }}">{{ map_form.doi.label }}</label></span>
                    {{ map_form.doi }}
                </div>
                {% endblock map_doi %}
                {% block map_purpose %}
                <div>
                    <span><label for="{{ map_form.purpose|id }}">{{ map_form.purpose.label }}</label></span>
                    <!--<p class="xxs-font-size">(Brief narrative summary of the intentions with which the resource/s ...)</p>-->
                    {{ map_form.purpose }}
                </div>
                {% endblock map_purpose %}
                {% block map_supplemental_information %}
                <div>
                    <span><label for="{{ map_form.supplemental_information|id }}">{{ map_form.supplemental_information.label }}</label></span>
                    <!--<p class="xxs-font-size">(Any other descriptive information about the dataset)</p>-->
                    {{ map_form.supplemental_information }}
                </div>
                {% endblock map_supplemental_information %}
            </div>
            <div class="col-xs-12 col-lg-5">
              {% block map_temporal_extent_start %}
                <div class="col-xs-12 col-lg-6">
                  <div class="input-group date">
                    <span><label for="{{ map_form.temporal_extent_start|id }}">{{ map_form.temporal_extent_start.label }}</label></span>
                    <!--<p class="xxs-font-size">(When a given event occurred on the resource)</p>-->
                    {{ map_form.temporal_extent_start }}
                  </div>
                </div>
                {% endblock %}
                <div class="col-xs-12 col-lg-6">
                    {% block map_temporal_extent_end %}
                    <div class="input-group date">
                    <span><label for="{{ map_form.temporal_extent_end|id }}">{{ map_form.temporal_extent_end.label }}</label></span>
                    <!--<p class="xxs-font-size">(Identification of when a given event occurred)</p>-->
                    {{ map_form.temporal_extent_end }}
                    </div>
                    {% endblock map_temporal_extent_end %}
                </div>
                {% block maintenance_block %}
                <div class="col-xs-12">
                    <div style="margin-top: 5px">
                        <span><label for="{{ map_form.maintenance_frequency|id }}">{{ map_form.maintenance_frequency.label }}</label></span>
                        <!--<p class="xxs-font-size">(Identification of when a given event occurred)</p>-->
                        {{ map_form.maintenance_frequency }}
                    </div>
                    <div style="margin-top: 5px">
                        <span><label for="{{ map_form.spatial_representation_type|id }}">{{ map_form.spatial_representation_type.label }}</label></span>
                        <!--<p class="xxs-font-size">(Method used to represent geographic information in the dataset)</p>-->
                        {{ map_form.spatial_representation_type }}
                    </div>
                    {% block map_extra_metadata %}
                    <div style="margin-top: 5px">
                        <span><label for="{{ map_form.extra_metadata|id }}">{{ map_form.extra_metadata.label }}</label></span>
                        {{ map_form.extra_metadata }}
                    </div>
                    {% endblock map_extra_metadata %}
                    {% block map_linked_resources %}
                    <div id="linked_resources">
                      <span><label for="{{ map_form.linked_resources|id }}">{% trans "Related resources" %}</label></span>
                      {{ map_form.linked_resources }}
                    </div>
                    {% endblock map_linked_resources %}

                </div>
                {% endblock maintenance_block %}
            </div>
            <!-- Contact Roles -->
            <div class="col-xs-12 col-lg-3" >
              <div class="panel panel-default" class="collapse" style="margin-top: 5px">
                <div class="panel-heading">{% trans "Responsible Parties" %}</div>
                  {% block map_poc %}
                  <div class="panel-body check-select">
                      <span><label for="{{ map_form.poc|id }}">{{ map_form.poc.label }}</label></span>
                      {{ map_form.poc }}
                  </div>
                  {% endblock map_poc %}
            </div>
              <div class="panel panel-default">
                  <div class="panel-heading">{% trans "Responsible and Permissions" %}</div>
                  <div class="panel-body">
                    {% block map_owner %}
                      <div>
                          <span><label for="{{ map_form.owner|id }}">{{ map_form.owner.label }}</label></span>
                          {{ map_form.owner }}
                      </div>
                    {% endblock map_owner %}
                  </div>
                </div>
              <a href="#id-more-metadata-panel" data-toggle="collapse">{% trans "toggle more Contact Roles" %}</a>
              {% block map_more_contact_roles %}
              <div class="panel panel-default panel-collapse collapse" collapsed id='id-more-metadata-panel'>
                <div class="panel-heading">{% trans "more metadata contact roles" %}</div>
                  {% for contact_role in UI_ROLES_IN_TOGGLE_VIEW %}
                    {% getattribute map_form contact_role as cr %}
                    <div class="panel-body">
                      <div>
                        <span><label for="{{cr|id}}">{{cr.label}}</label></span>
                        {{ cr}}
                      </div>
                    </div>
                  {% endfor %}
                </div>
              </div>
              {% endblock map_more_contact_roles %}
            </div>
            <!--End Contact Roles -->
          </div>
        </div>
      </div>
    </div>
    {% block extra_metadata_content %}
    {% endblock %}
</div>
<div id="settings" class="tab-pane fade" style="overflow: hidden;">
  <!--<br />-->
    <div class="col-xs-12 col-lg-4">
      <div class="panel-group">
          <div class="panel panel-default">
              <div class="panel-body">
                <div class="panel panel-default" >
                  <div class="panel-heading">{% trans "Publishing" %}</div>
                  <div class="panel-body">
                    <div>
                        <span><label for="{{ map_form.metadata_uploaded_preserve|id }}">{{ map_form.metadata_uploaded_preserve.label }}</label></span>
                        {{ map_form.metadata_uploaded_preserve }}
                    </div>
                    <div>
                        <span><label for="{{ map_form.is_approved|id }}">{{ map_form.is_approved.label }}</label></span>
                        {{ map_form.is_approved }}
                    </div>
                    <div>
                        <span><label for="{{ map_form.is_published|id }}">{{ map_form.is_published.label }}</label></span>
                        {{ map_form.is_published }}
                    </div>
                    {% if user.is_superuser %}
                    <div>
                        <span><label for="{{ map_form.featured|id }}">{{ map_form.featured.label }}</label></span>
                        {{ map_form.featured }}
                    </div>
                    {% endif %}
                  </div>
                </div>
              </div>
          </div>
      </div>
    </div>
    <div class="col-xs-12 col-lg-4">
      <div class="panel-group">
          <div class="panel panel-default">
              <div class="panel-body">
                <div class="panel panel-default" >
                  <div class="panel-heading">{% trans "Other Settings" %}</div>
                  <div class="panel-body">
                    <div>
                        <span><label for="{{ map_form.urlsuffix|id }}">{{ map_form.urlsuffix.label }}</label></span>
                        {{ map_form.urlsuffix }}
                    </div>
                    <div>
                        <span><label for="{{ map_form.featuredurl|id }}">{{ map_form.featuredurl.label }}</label></span>
                        {{ map_form.featuredurl }}
                    </div>
                  </div>
                </div>
              </div>
          </div>
      </div>
    </div>
</div>
</div>
{% endblock %}
